<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>练习1：制作多彩照片墙</title>
		<style>
			.box{
				width: 960px;
				margin-top: 200px;
				position: relative;
			}
			.box img{
				border: 1px solid #ddd;
				padding: 10px;
				position: absolute;
				background: #fff;
				z-index: 1;
			}
			img:nth-child(odd){
				width: 300px;
			}
			img:nth-child(even){
				width: 200px;
			}
			.box img:nth-child(1){
				top: 0px;
				left: 400px;
				transform: rotate(-15deg);
			}
			.box img:nth-child(2){
				top: -50px;
				left: 600px;
				transform: rotate(-20deg);
			}
			.box img:nth-child(3){
				top: -150px;
				left: 800px;
				transform: rotate(15deg);
			}
			.box img:nth-child(4){
				top: -140px;
				left: 400px;
				transform: rotate(-15deg);
			}
			.box img:nth-child(5){
				top: -150px;
				left: 80px;
				transform: rotate(-30deg);
			}
			.box img:nth-child(6){
				top: 100px;
				left: 100px;
				transform: rotate(20deg);
			}
			.box img:nth-child(7){
				top: 50px;
				left:860px;
				transform: rotate(20deg);
			}
			.box img:nth-child(8){
				top: -240px;
				left: 600px;
				transform: rotate(30deg);
			}
			.box img:nth-child(9){
				top: 120px;
				left:650px;
				transform: rotate(15deg);
			}
			.box img:nth-child(10){
				top: 120px;
				left: 300px;
				transform: rotate(-10deg);
			}
			.box img:hover{
				z-index: 2;
				box-shadow: 5px 5px 5px #DDDDDD;
				transform: rotate(0deg) scale(1.5);	
			}
			a{
				position: absolute;
				top: 500px;
				left: 500px;
			}
		</style>
	</head>
	<body>
		<div class="box ">
			<img src="image/1.jpg" />
			<img src="image/2.jpg" />
			<img src="image/3.jpg" />
			<img src="image/4.jpg" />
			<img src="image/5.jpg" />
			<img src="image/6.jpg" />
			<img src="image/7.jpg" />
			<img src="image/8.jpg" />
			<img src="image/9.jpg" />
			<img src="image/10.jpg" />
		</div>
		<a href="练习2：旋转按钮.html">下一页</a>
	</body>
</html>
